:root {
    /* 背景色 */
    --c-background: #F5F7FA; /* 浅灰色背景，柔和且不刺眼 */
    --c-block: #E9EBEE; /* 比background稍深一些，形成区域感 */
    --c-secondary: #DDE1E6; /* 介于background与block之间，用于分隔区域 */

    /* 字体颜色，在背景色为"background"/"block"/"secondary"的默认字体颜色 */
    --c-font: #333333; /* 深灰色字体，清晰易读 */

    /* 按钮文字颜色，其可能的背景色为：block/red/orange/yellow/green/blue/purple/cyan/pink/gray */
    --c-btn_font: #FFFFFF; /* 白色按钮文字，适用于各种颜色背景 */

    /* 列表相关颜色 */
    --c-listBackground: #F5F7FA; /* 列表背景色，与主背景一致 */
    --c-listItemBackground: #FFFFFF; /* 列表项背景色为白色，突出内容 */
    --c-listItemFont: #333333; /* 列表项文字颜色，深灰色，清晰易读 */

    /* 主色 */
    --c-primary: #8A9A5B; /* 主色为青绿色，象征自然、宁静，带有武侠气息 */

    /* 各种颜色 */
    --c-red: #D32F2F; /* 红色，略深沉，不过于刺眼 */
    --c-orange: #FFA000; /* 橙色，温暖但不张扬 */
    --c-yellow: #FFD740; /* 黄色，明亮但柔和 */
    --c-green: #689F38; /* 绿色，清新自然 */
    --c-blue: #303F9F; /* 蓝色，深邃而神秘 */
    --c-purple: #7B1FA2; /* 紫色，带有武侠中的神秘感 */
    --c-cyan: #0097A7; /* 青色，清爽如水 */
    --c-pink: #C2185B; /* 粉色，柔和但不失个性 */
    --c-gray: #757575; /* 灰色，低调沉稳 */

    /* 状态颜色 */
    --c-success: #689F38; /* 成功颜色，绿色，清新自然 */
    --c-danger: #D32F2F; /* 危险颜色，红色，深沉但醒目 */
    --c-warning: #FFA000; /* 警告颜色，橙色，温暖提醒 */

    /* {name}_font, 一般是指当背景色为{name}时，文字的颜色 */
    --c-primary_font: #FFFFFF; /* 主色背景的文字颜色，白色，清晰对比 */
    --c-secondary_font: #333333; /* 次要背景的文字颜色，深灰色，清晰易读 */

    --c-red_font: #FFFFFF; /* 红色背景的文字颜色，白色，对比强烈 */
    --c-orange_font: #FFFFFF; /* 橙色背景的文字颜色，白色，清晰对比 */
    --c-yellow_font: #333333; /* 黄色背景的文字颜色，深灰色，避免刺眼 */
    --c-green_font: #FFFFFF; /* 绿色背景的文字颜色，白色，清晰对比 */
    --c-blue_font: #FFFFFF; /* 蓝色背景的文字颜色，白色，对比强烈 */
    --c-purple_font: #FFFFFF; /* 紫色背景的文字颜色，白色，清晰对比 */
    --c-cyan_font: #FFFFFF; /* 青色背景的文字颜色，白色，对比强烈 */
    --c-pink_font: #FFFFFF; /* 粉色背景的文字颜色，白色，清晰对比 */
    --c-gray_font: #FFFFFF; /* 灰色背景的文字颜色，白色，对比清晰 */

    --c-success_font: #FFFFFF; /* 成功状态的文字颜色，白色，清晰对比 */
    --c-danger_font: #FFFFFF; /* 危险状态的文字颜色，白色，对比强烈 */
    --c-warning_font: #333333; /* 警告状态的文字颜色，深灰色，避免刺眼 */
}
  
/* 字体颜色类 */
.c_primary { color: var(--c-primary); }
.c_secondary { color: var(--c-secondary); }
.c_font { color: var(--c-font); }
.c_btn_font { color: var(--c-btn_font); }
.c_listItemFont { color: var(--c-listItemFont); }

.c_red { color: var(--c-red); }
.c_orange { color: var(--c-orange); }
.c_yellow { color: var(--c-yellow); }
.c_green { color: var(--c-green); }
.c_blue { color: var(--c-blue); }
.c_purple { color: var(--c-purple); }
.c_cyan { color: var(--c-cyan); }
.c_pink { color: var(--c-pink); }
.c_gray { color: var(--c-gray); }

.c_success { color: var(--c-success); }
.c_danger { color: var(--c-danger); }
.c_warning { color: var(--c-warning); }

/* 背景色类 */
.b_background { background-color: var(--c-background); color: var(--c-font); }
.b_block { background-color: var(--c-block); color: var(--c-font); }
.b_secondary { background-color: var(--c-secondary); color: var(--c-secondary_font); }

.b_listBackground { background-color: var(--c-listBackground); color: var(--c-listItemFont); }
.b_listItemBackground { background-color: var(--c-listItemBackground); color: var(--c-listItemFont); }

.b_primary { background-color: var(--c-primary); color: var(--c-primary_font); }
.b_red { background-color: var(--c-red); color: var(--c-red_font); }
.b_orange { background-color: var(--c-orange); color: var(--c-orange_font); }
.b_yellow { background-color: var(--c-yellow); color: var(--c-yellow_font); }
.b_green { background-color: var(--c-green); color: var(--c-green_font); }
.b_blue { background-color: var(--c-blue); color: var(--c-blue_font); }
.b_purple { background-color: var(--c-purple); color: var(--c-purple_font); }
.b_cyan { background-color: var(--c-cyan); color: var(--c-cyan_font); }
.b_pink { background-color: var(--c-pink); color: var(--c-pink_font); }
.b_gray { background-color: var(--c-gray); color: var(--c-gray_font); }

.b_success { background-color: var(--c-success); color: var(--c-success_font); }
.b_danger { background-color: var(--c-danger); color: var(--c-danger_font); }
.b_warning { background-color: var(--c-warning); color: var(--c-warning_font); }